<template>
	<view class="container" v-if="info">
		<view class="goods-box">
			<image :src="$img_base_url(info.orderGoods.image)" mode="widthFix"></image>
			<view class="info">
				<view class="name more-row" :style="{'--row-num':2}">
					{{info.orderGoods.title}}
				</view>
				<!-- <view class="num">
					已拼{{info.orderGoods.title}}件
				</view> -->
				<view class="price">
					<text>拼团价￥{{info.orderGoods.price}}</text><text>￥{{info.orderGoods.market_price}}</text>
				</view>
			</view>
		</view>
		
		<view class="status">
			<text>{{info.state=='start' ? '' : info.state == 'success' ? '拼团成功' : '拼团失败'}}</text>
		</view>
		<view class="p-user">
			<view class="m pz">
				<text>拼主</text>
				<image :src="$img_base_url(info.user.avatar)" mode="aspectFill"></image>
			</view>
			<view class="other">
				<view class="m" v-for="(item,i) in info.team.slice(1)">
					<image :src="$img_base_url(item.user.avatar)" mode="aspectFill"></image>
				</view>
				<view class="m" v-for="(item,i) in (info.people_num - info.join_num)">
					<image :src="$img_path('/mall/avatar.png')" mode="aspectFill"></image>
				</view>
			</view>
		</view>
		<view class="time" v-if="info.state=='start'">
			<text>距离结束还剩</text> 
			<wanl-timeout :endTime="info.validitytime" color="#333333" backgroundColor="#ffffff"
				borderColor="#ffffff" padding="0" margin="0" />
		</view>
		
		<view class="btn">
			<button v-if="info.state=='start'">立即参团</button>
			<button v-else>更多拼团商品</button>
		</view>
	</view>
</template>

<script>
	import {teamShareGroups} from '@/utils/api/mallApi.js'
	import wanlTimeout from '@/components/wanl-timeout/wanl-timeout.vue'
	export default {
		components:{
			wanlTimeout
		},
		data() {
			return {
				order_no:null,
				info:null
			};
		},
		onLoad(options) {
			this.order_no = options.group_no
			this.getInfo()
		},
		methods:{
			getInfo(){
				teamShareGroups({id:this.order_no}).then(res=>{
					this.info = res.data
				})
			}
		}
	}
</script>
<style>
	page{
		background-color: #FFFFFF;
	}
</style>
<style lang="scss" scoped>
.container{
	padding: 20rpx 22rpx 0;
	box-sizing: border-box;
	.goods-box{
		display: flex;
		&>image{
			width: 180rpx;
			height: 180rpx;
			border-radius: 20rpx;
		}
		.info{
			width: calc(100% - 180rpx);
			padding-left: 20rpx;
			box-sizing: border-box;
			.name{
				font-weight: 400;
				font-size: 28rpx;
				color: #000000;
				line-height: 40rpx;
			}
			.num{
				font-weight: 400;
				font-size: 28rpx;
				color: #858585;
				line-height: 40rpx;
				margin-top: 8rpx;
			}
			.price{
				display: flex;
				align-items: center;
				margin-top: 12rpx;
				text:first-child{
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
				}
				text:last-child{
					font-weight: 400;
					font-size: 24rpx;
					color: #B4B4B4;
					line-height: 34rpx;
					text-decoration: line-through;
					margin-left: 20rpx;
				}
			}
		}
	}
	.status{
		width: 100%;
		height: 44rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #000000;
		line-height: 44rpx;
		text-align: center;
		margin-top: 82rpx;
	}
	
	.p-user{
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 36rpx;
		.m{
			width: 84rpx;
			height: 84rpx;
			position: relative;
			image{
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
			&.pz{
				text{
					width: 56rpx;
					height: 28rpx;
					background: #E72A2A;
					border-radius: 14rpx;
					font-weight: 400;
					font-size: 20rpx;
					color: #FFFFFF;
					line-height: 28rpx;
					text-align: center;
					position: absolute;
					top: 0;
					left: 0;
				}
			}
		}
		.other{
			margin-left: 40rpx;
			display: flex;
			&>view{
				margin-left: 20rpx;
			}
		}
	}
	.time{
		margin-top: 32rpx;
		font-weight: bold;
		font-size: 28rpx;
		color: #000000;
		line-height: 40rpx;
		text-align: center;
		text{
			font-weight: Regular;
			margin-right: 10rpx;
		}
	}
	.btn{
		margin-top: 58rpx;
		button{
			width: 100%;
			height: 96rpx;
			background: linear-gradient( 135deg, #FFA233 0%, #FB4C4C 100%);
			border-radius: 80rpx;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 80rpx;
		}
	}
}
</style>
